<template>
    <div :id="mapId" style="width: 100%; height: 350px; display: inline-block;">
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { Toast } from 'vant'
export default {
    name: 'diamond',
    data: function () {
        return {
            mapId: this.alldata.sname + this.alldata.itemid,
            mapData: {},
            allMapData: {},
            allMapNameData: {},
            code: !this.hiscode ? '100000' : this.hiscode,
            chart: {}
        }
    },
    props: ['alldata', 'hiscode'],
    mounted () {
        // //console.log('chinamap data', this.alldata, 'hiscode', this.hiscode)
        this.init()
    },
    methods: {
        init: async function () {
            await this.getMapData(this.code)
            await this.getAllMapData()
            this.showMap()
        },
        showMap () {
            let _that = this
            let series = [{
                name: '',
                type: 'map',
                map: this.code === '100000' ? 'china' : this.code,
                roam: true,
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: eval(this.alldata.mapdata)
            }]
            if (this.code === '100000') {
                series[0]['center'] = [105.347019, 36.28803]
                series[0]['zoom'] = 1.4
            }
            let option = {
                backgroundColor: '#FFFFFF',
                title: {
                    text: this.alldata.title
                },
                tooltip: {
                    trigger: 'item'
                },
                toolbox: {
                    show: true,
                    feature: {
                        myReturn: {
                            show: true,
                            title: '返回',
                            icon: 'path://M700.371228 394.525472 174.028569 394.525472l255.952416-227.506551c12.389168-11.011798 13.505595-29.980825 2.492774-42.369993-11.011798-12.386098-29.977755-13.506619-42.367947-2.492774L76.425623 400.975371c-6.960529 5.496178-11.434423 14.003945-11.434423 23.561625 0 0.013303 0.001023 0.026606 0.001023 0.039909 0 0.01228-0.001023 0.025583-0.001023 0.037862 0 0.473791 0.01535 0.946558 0.037862 1.418302 0.001023 0.016373 0.001023 0.032746 0.001023 0.049119 0.39295 8.030907 3.992941 15.595186 10.034541 20.962427l315.040163 280.028764c5.717212 5.083785 12.83533 7.580652 19.925818 7.580652 8.274454 0 16.514115-3.403516 22.442128-10.07445 11.011798-12.387122 9.896394-31.357172-2.492774-42.367947l-256.128425-227.665163 526.518668 0c109.219517 0 198.075241 88.855724 198.075241 198.075241s-88.855724 198.075241-198.075241 198.075241L354.324888 850.696955c-16.57449 0-30.011524 13.437034-30.011524 30.011524s13.437034 30.011524 30.011524 30.011524l346.046341 0c142.31631 0 258.098289-115.783003 258.098289-258.098289S842.686515 394.525472 700.371228 394.525472z',
                            onclick: () => {
                                _that.$emit('query-data', { code: '100000', name: '' })
                            }
                        }
                    }
                },
                visualMap: {
                    show: false,
                    x: 'left',
                    y: 'bottom',
                    splitList: eval(this.alldata.number),
                    color: eval(this.alldata.color)
                },
                series: series
            }
            this.chart = echarts.init(document.getElementById(this.mapId))
            this.chart.setOption(option)
            this.chart.on('click', function (params) {
                // //console.log('click map', params, _that.code.replaceAll('/', '') + params.name, _that.allMapNameData[_that.code.replaceAll('/', '') + params.name])
                _that.$emit('query-data', { code: (!_that.hiscode ? '100000' : _that.hiscode) + '/' + _that.allMapNameData[_that.code.replaceAll('/', '') + params.name], name: params.name })
            })
        },
        getMapData: async function (code) {
            // //console.log('code', code)
            this.mapData = !this.$route.params.allMapData ? this.$route.params.allMapData : this.$route.params.allMapData[code]
            if (!this.mapData) {
                let _that = this
                await this.axios({
                    method: 'post',
                    url: '/common/map/' + code + '.json',
                    data: {}
                }).then(res => {
                    _that.mapData = res.data
                    if (!_that.$route.params.allMapData) {
                        _that.$route.params.allMapData = {}
                    }
                    _that.$route.params.allMapData[code] = res.data
                    if (code === '100000') {
                        echarts.registerMap('china', { geoJSON: res.data })
                    }
                    echarts.registerMap(code, { geoJSON: res.data })
                }).catch(res => {
                    this.reserror(res)
                })
            }
        },
        getAllMapData: async function () {
            this.allMapNameData = this.$route.params.allMapNameData
            if (!this.allMapNameData) {
                let _that = this
                await this.axios({
                    method: 'post',
                    url: '/common/map/alldata.json',
                    data: {}
                }).then(res => {
                    _that.allMapNameData = res.data
                    this.$route.params.allMapNameData = res.data
                    // //console.log(res.data)
                }).catch(res => {
                    this.reserror(res)
                })
            }
        }
    }
}
</script>
